import axios from 'axios';
import Vuex from 'vuex';
import Vue from 'vue/dist/vue.js';
import {config} from '../configData.js';
import unit from '../../js/tool/unit.js';
import kfm_png from '../../img/kfm.png';
Vue.use(Vuex);

/*
* 符号说明:
    * *  :表示非组件
    * +* :表示根组件
    * -* :表示子组件
* index
* record_event
    +* root
        -* index
            -* folder
        -* CDA
            -* articleImg
            -* articleContent
        -* articleContent
* */
/*
* 因为代码调整,所以需要重写自适应
* */
let record_event = (function(){
    let RE_config={
        logoSrc:kfm_png
    };
    let RE_unit = {
        store:new Vuex.Store({
            state: {
                listData: {
                    date:'',
                    listName:'',
                    article:[]
                },
                articleData:{
                    title:'',
                    content:''
                },
                show:{
                    show:true
                }
            },
            mutations: {
                updateListData: (state,newData)=> {
                    state.listData = newData;
                },
                updateArticle: (state,newData)=> {
                    state.articleData = newData;
                },
                updateShow:(state,newData)=>{
                    state.show = newData;
                }
            },
            getters:{
                getListData:(state)=>{
                    return state.listData||'null';
                },
                getArticleData:(state)=>{
                    return state.articleData||'null';
                },
                getShowData:(state)=>{
                    return state.show||'null';
                }
            }
        }),
    };

    let CDA = {
        /*
        * 文章显示区域
        * */
        props:['CDAWidth','CDAHeight','CDALeft','CDACont_w'],
        template:
        '<div v-show="show" id="CDA" :style=[CDAStyle]>' +
            '<div id="title">{{getTitle}}</div>'+
            '<article id="content" :style=[preStyle]>{{getContent}}</article>'+
        '</div>',
        data:function () {
            return{
                propsData:{
                    imgSrc:RE_config.logoSrc,
                    img_w:this.img_w(),
                    img_h:this.boxStyle_h(),
                    content_h:this.boxStyle_h(),
                    content_w:this.$props.CDACont_w
                },
                CDAStyle:{
                    position:'absolute',
                    display:'inline-block',
                    backgroundColor:'#d9dadb',
                    width:this.$props.CDAWidth+'px',
                    height:this.$props.CDAHeight+'px',
                    left:this.$props.CDALeft+'px'
                },
                preStyle:{
                    position:'relative',
                    display:'block',
                    fontSize:20+'px',
                    backgroundColor:'#d9dadb',
                    whiteSpace:'pre-wrap',
                    width:this.$props.CDACont_w+'px',
                    height:this.boxStyle_h()+'px'
                },
            }
        },
        computed:{
            getTitle:function () {
                return this.$store.getters.getArticleData.title;
            },
            getContent:function () {
                return this.$store.getters.getArticleData.content;
            },
            show:function () {
                return this.$store.getters.getShowData.show;
            }
        },
        methods:{
            boxStyle_h:function () {
                return 190;
            },
            img_w:function () {
                return 220;
            },
            updatePropsData:function () {
                this.$data.propsData.content_w=this.$props.CDAWidth;
            },
            updateCDAStyle:function () {
                this.$data.CDAStyle.width = this.$props.CDAWidth+'px';
                this.$data.CDAStyle.height= this.$props.CDAHeight+'px';
                this.$data.CDAStyle.left = this.$props.CDALeft+'px';
            },
            updateBoxStyle:function () {
                this.$data.preStyle.width = this.$props.CDAWidth+'px';
                this.$data.preStyle.height = this.boxStyle_h()+'px';
            },
            resize:function () {
                this.updateBoxStyle();
                this.updateCDAStyle();
                this.updatePropsData();
            }
        },
        mounted:function () {
          unit.observer.add('CDA',this.resize);
        },
        components:{
        }
    };
    let list = {
        /*
        * 文章列表
        * */
        props:['listWidth','listHeight','listJson'],
        template:
        '<ul @click="updateShow">' +
            '<div @click="getArticleCont" :style=[list_buttonStyle]>' +
                '<li :style=[ilStyle]>{{dataJson.article_title}}</li>' +
            '</div>' +
        '</ul>',
        data:function () {
            return {
                dataJson:this.$props.listJson,
                list_buttonStyle:{
                    cursor:'Pointer'
                },
                ilStyle:{
                    position:'relative',
                    display:'inline-block',
                    color:'#66b954',
                    width:this.$props.listWidth+'px',
                    height:this.$props.listHeight+'px',
                    textAlign:'center'
                }
            }
        },
        methods:{
            getArticleCont:function () {
                /*
                * 点击list中的文章后,会提交该文章的标题到vuex,并将内容清空
                * 与此同时会向后台请求文章内容,后台返回文章内容后,会更新vuex中相应的部分
                * */
                let _this = this;
                let title = _this.$data.dataJson.article_title;
                this.$store.commit('updateArticle',{title:title});
                axios.post('queryArticle',{article_title:title})
                    .then(function (response) {
                        _this.$store.commit('updateArticle',{content:response.data});
                    });
            },
            updateShow:function () {
                this.$store.commit('updateShow',{show:true});
            }
        },
        mounted:function () {
        }
    };
    let index = {
        /*
        * 文章目录
        * */
        props:['indexWidth','indexHeight','indexCont_w'],
        template:
            '<div id="RE_index" :style=[indexStyle]>' +
                '<list v-for="num in folderProps.folderJson" :key="num.listName" :listJson="num" :listWidth="folderProps.w" :listHeight="folderProps.h"></list>' +
            '</div>',

        data:function () {

            return {
                folderProps:{
                    w:this.$props.indexCont_w,
                    h:30,
                    folderJson:new Array(0)
                },
                indexStyle:{
                    position:'absolute',
                    display:'inline-block',
                    // backgroundColor:'#373937',
                    width:this.$props.indexWidth+'px',
                    height:this.$props.indexHeight+'px'
                }
            }
        },

        methods:{
            defaultFolder:function () {
                let folderJson = this.$data.folderProps.folderJson[0];
                this.$store.commit('updateListData',folderJson);
            },
            axiosArticleList:function () {
                axios.post('queryArticleTitleList')
                    .then((response)=>{
                        this.$data.folderProps.folderJson = response.data;
                        this.$store.commit('updateListData',this.$data.folderProps.folderJson);
                    })
            },
            axiosArticleCont:function () {
                
            }
        },
        created:function () {
            this.axiosArticleList();
        },
        mounted:function () {
            this.defaultFolder();
        },
        components:{
            'list':list
        }
    };
    let articleContent = {
        props:['imgSrc','ACWidth','ACHeight','ACLeft','ACCont_w'],
        template:
        '<div v-show="show" :style=[ACStyle]>' +
            '<div @click="updateShow" id="goBack" :style=[goBackStyle]>' +
                '<img :style=[imgStyle] :src="imgSrc" />' +
            '</div>' +
            '<div id="contentBox" :style=[CBoxStyle]>' +
                '<div :style=[titleStyle]>{{getTitle}}</div>' +
                '<div :style=[detailsStyle]>{{getDetails}}</div>' +
            '</div>'+
        '</div>',
        data:function () {
            return {
                ACStyle:{
                    position:'absolute',
                    display:'inline-block',
                    backgroundColor:'#9a9b9c',
                    left:this.$props.ACLeft+'px',
                    width:this.$props.ACWidth+'px',
                    height:this.$props.ACHeight+'px'
                },
                goBackStyle:{
                    position:'absolute',
                    display:'block',
                    width:50+'px',
                    height:50+'px'
                },
                imgStyle:{
                    position:'relative',
                    width:50+'px',
                    height:50+'px'
                },
                CBoxStyle:{
                    display:'block'
                },
                titleStyle:{
                    display:'inherit',
                    textAlign:'center',
                    fontWeight:'900'
                },
                detailsStyle:{
                    display:'inherit',
                    textIndent:100+'px'
                }
            }
        },
        computed:{
            getTitle:function () {
                return this.$store.getters.getArticleData.title;
            },
            getDetails:function () {
                return this.$store.getters.getArticleData.details;
            },
            show:function () {
                return !(this.$store.getters.getShowData.show);
            },
        },
        methods:{
            updateShow:function () {
                this.$store.commit('updateShow',{show:true});
            }
        }
    };
    let root = {
        store:RE_unit.store,
        template:
        '<transition name="re">'+
        '<div id="record_event" :style=[rootStyle]>' +
            '<index :indexWidth="indexProps.w" :indexCont_w="indexProps.content_w" :indexHeight="indexProps.h"></index>' +
            '<content-display-area :CDAWidth="CDAProps.w" :CDAHeight="CDAProps.h" :CDACont_w="CDAProps.content_w" :CDALeft="CDAProps.left"></content-display-area>' +
            '<article-content :imgSrc="ACProps.imgSrc" :ACWidth="CDAProps.w" :ACHeight="CDAProps.h" :ACCont_w="CDAProps.content_w" :ACLeft="CDAProps.left"></article-content>'+
        '</div>'+
        '</transition>',
        data:function () {
            return {
                indexProps:{
                    w:this.indexProps_w(),
                    //content_w该属性是子组件的内容所需要的宽度,否则会出现底部滚动条
                    content_w:this.indexProps_w()-this.getScrollbar_w(),
                    h:this.indexProps_h()
                },
                CDAProps:{
                    w:window.innerWidth-this.indexProps_w(),
                    //content_w该属性是子组件的内容所需要的宽度,否则会出现底部滚动条
                    content_w:window.innerWidth-this.indexProps_w()-this.getScrollbar_w(),
                    h:this.indexProps_h(),
                    left:this.indexProps_w()
                },
                ACProps:{
                    imgSrc:RE_config.logoSrc
                },
                rootStyle:{
                    position:'absolute',
                    display:'inline-block',
                    backgroundColor:'#7f7f7f',
                    top:config.nav_h+'px',
                    width:100+'%',
                    height:window.innerHeight-config.nav_h+'px'
                }
            }
        },
        methods:{
            getScrollbar_w:function () {
                return config.scrollbar_w;
            },
            indexProps_w:function () {
                return 150;
            },
            indexProps_h:function () {
                return window.innerHeight-config.nav_h;
            },
            updateCDAProps:function () {
                this.$data.CDAProps.w = window.innerWidth-this.indexProps_w();
                this.$data.CDAProps.h = this.indexProps_h();
            },
            updateIndex:function () {
                this.$data.indexProps.h = this.indexProps_h();
            },
            updateRootStyle:function () {
                this.$data.rootStyle.height = window.innerHeight-config.nav_h+'px';
            },
            resize:function () {
                this.indexProps_h();
                this.updateCDAProps();
                this.updateIndex();
                this.updateRootStyle();
            }
        },
        components:{
            'index':index,
            'content-display-area':CDA,
            'article-content':articleContent
        },
        mounted:function () {
            unit.observer.add('re_root',this.resize);
        }
    };

    let commitTitle = function (_title) {
        /*
        * 给其他的模块提供修改本模块显示内容的功能
        * */
        axios.post('queryArticle',{article_title:_title}).then(function (response) {
            RE_unit.store.commit('updateArticle',{content:response.data});
        });

    };

    return {
        root:root,
        commitTitle:commitTitle
    };
}());
export default record_event;